import React from "react";
import { actionCreators } from "./store";
import { TabBar } from 'antd-mobile';
import { connect } from 'react-redux';
import {fromJS} from 'immutable';
class Footer extends React.Component {
  render() {
    const { footerArr, active } = this.props;
    return <div style={{ position: 'fixed', bottom: 0, width: "100%", background: "#fff", zIndex: '112' }}>
      <TabBar
        unselectedTintColor="#949494"
        tintColor="#33A3F4"
        barTintColor="white"
        tabBarPosition="top"
      >
        {footerArr.map(i => {
          return <TabBar.Item
            title={i.title}
            key={i.title}
            selectedIcon={this.setIcon(i.selectedIcon)}
            icon={this.setIcon(i.icon)}
            selected={active === i.selectedTab}
            onPress={() => {
              // setFooterActive(i.selectedTab)
              this.props.history.push(i.path)
            }}
            data-seed="logId"
          ></TabBar.Item>
        })}
      </TabBar>
    </div>
  }
  //生成icon
  setIcon(icon) {
    return (
      <div style={{
        width: '22px',
        height: '22px',
        background: `url(${icon}) center center /  21px 21px no-repeat`
      }}></div>
    )
  }
  componentDidMount() {
    let path = this.props.location.pathname.replace('/', "");
    this.props.setFooterActive(path)
  }
  componentWillReceiveProps(nextProps) {
    let path = nextProps.location.pathname
    if (path!==this.props.location.path) {
      path= path.replace('/', "") ;
      this.props.setFooterActive(path)
    }  
  }
}
const mapStateToProps = (state, ownProps) => {
    state= fromJS(state);
  return {
    active: state.getIn(["footer", "active"]),
    footerArr: state.getIn(["footer", "footerArr"]).toJS(),
  };
};
const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    setFooterActive(i) {
      i = i ?i:'home';//优化进入路径为""的时候
      dispatch(actionCreators.setFooterActive(i));
    },
  };
};
export default connect(mapStateToProps, mapDispatchToProps)(Footer)
